<template>
  <div class="order" v-if="order">
    <div class="block-border">
      <van-cell title="管理订单" value="前往个人中心" isLink @click="goToUser" />
    </div>
    <van-notice-bar v-if="order.status === 6" :scrollable="false" text="该订单已关闭" />
    <van-steps :active="orderStep" :steps="stepList" />

    <div class="block-border" style="margin-top:20rpx;">
      <van-cell v-if="order.roe_status"  title="退换货状态" :value="transOrderRoeStatus" is-link @click="applyRoe"/>
    </div>

    <div class="block-border">
      <van-cell title="收件人信息"></van-cell>
      <van-cell :title="address_title" :label="address_body" />
    </div>

    <van-panel :title="'订单号：'+ order.no" style="margin-top:10px;">
      <div v-for="(item, index) in order.detail" @click="onDetailClick(item)" :key="index" class="item">
        <van-card :title="item.product_title" :desc="item.sku_name" :num="item.amount" :price="item.price" :thumb="item.product_image + '?imageView2/1/w/120/h/120/q/75'" :key="index" />
      </div>
      <div class="block-border">
        <van-cell title="下单时间" :value="order.submitted_at" />
        <van-cell v-if="order.status !== 3" title="买家留言" :value="order.customer_message" />
        <van-cell title="配送方式" value="普通快递" />
        <van-cell title="运费" :value="'￥'+order.express_fee" />
        <van-cell v-if="order.red_packet" :title="'优惠(' + order.red_packet.name + ')'" :value="'-￥'+order.red_packet.value" />
        <van-cell title="合计" :value="'￥' + order.money" />
      </div>
    </van-panel>

    <van-cell-group class="border-block" :border="false" v-if="order.status == 3">
      <van-cell title="买家留言"  value="点击更新" @click="updateCustomerMessage"/>
      <van-field :value="customer_message" placeholder="点击备注花色、度数、其它留言" type="textarea" autosize @change="updateMessage"></van-field>
    </van-cell-group>

    <van-cell-group v-if="order.paid_at" :border="false" class="block-border">
      <van-cell title="支付方式" value="微信支付" />
      <van-cell title="支付时间" :value="order.paid_at" />
    </van-cell-group>

    <van-cell-group v-if="order.delivered_at" :border="false" class="block-border">
      <van-cell title="发货时间" :value="order.delivered_at" />
      <van-cell title="物流信息" value="查看" is-link  @click="goTrack"/>
      <van-cell v-if="order.completed_at" title="完成时间" :value="order.completed_at" />
    </van-cell-group>
    
    <van-cell-group v-if="order.completed_at" :border="false" class="block-border">
      <van-cell title="完成时间" :value="order.completed_at"/>
    </van-cell-group>

     <div v-if="order.status === 2" class="btns">
      <van-button size="normal" block type="primary" @click="goPay">去支付</van-button>
      <div class="cancel-btn">
        <van-button size="normal" block type="default" @click="cancel" :loading="cancel_loading">取消订单</van-button>
      </div>
    </div>


    <div v-if="order.status === 4&&!order.roe_status || order.status === 4&&order.roe_status === 3" class="btns">
      <van-button size="normal" block type="primary" @click="confirmReceipt" :loading="confirm_receipt_loading">确认收货</van-button>
    </div>

    <div v-if="(order.status == 3 || order.status === 4)&&!order.roe_status&&!order.is_package" class="btns">
      <van-button size="normal" block type="default" @click="applyRoe">我要退换货</van-button>
    </div>
    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" /> 
  </div>
</template>
<script>
import * as OrderAction from '@/api/order'
import Dialog from 'vant-weapp/dist/dialog/dialog'
import Toast from 'vant-weapp/dist/toast/toast'
import Utils from '@/utils'
export default {
  data () {
    return {
      order: null,
      cancel_loading: false,
      customer_message: '',
      confirm_receipt_loading: false,
      stepList: [
        {
          text: '买家下单'
        },
        {
          text: '买家支付'
        },
        {
          text: '商家发货'
        },
        {
          text: '交易完成'
        }
      ]
    }
  },
  computed: {
    orderStep () {
      if (!this.order) return 0
      switch (this.order.status) {
        case 2:
          return 0
        case 3:
          return 1
        case 4:
          return 2
        case 5:
          return 3
      }
    },
    transOrderRoeStatus () {
      if (!this.order) return 0
      return Utils.transOrderRoeStatus(this.order.roe_status)
    },
    address_title () {
      if (!this.order) return ''
      return this.order.address_name + ' ' + this.order.address_tel
    },
    address_body () {
      if (!this.order) return ''
      return (
        this.order.address_province +
        ' ' +
        this.order.address_city +
        ' ' +
        this.order.address_county +
        ' ' +
        this.order.address_detail
      )
    }
  },
  methods: {
    updateMessage (event) {
      this.customer_message = event.mp.detail
    },
    goToUser () {
      wx.switchTab({ url: '../user/index' })
    },
    applyRoe () {
      wx.navigateTo({ url: 'return-good?id=' + this.order.id })
    },
    goPay () {
      wx.navigateTo({ url: 'pay?id=' + this.order.id })
    },
    onDetailClick (item) {
      wx.navigateTo({ url: '../product/detail?id=' + item.product_id })
    },
    goTrack () {
      wx.navigateTo({ url: './track?id=' + this.order.id })
    },
    updateCustomerMessage () {
      if (!this.customer_message) {
        Toast('没有要更新的留言信息')
        return
      }
      OrderAction.updateCustomerMessage(this.order.id, { message: this.customer_message }).then(data => {
        this.customer_message = data.customer_message
        Toast('留言更新成功')
      }).catch(err => this.$toast(err.msg))
    },
    cancel () {
      Dialog.confirm({title: '取消订单', message: '您是否要取消订单？'}).then(() => {
        this.cancel_loading = true
        OrderAction.cancel(this.order.id).then(() => {
          Toast('取消成功')
          this.fetchOrder()
        }).catch(err => {
          Toast(err.msg)
          this.cancel_loading = false
        })
      })
    },
    confirmReceipt () {
      Dialog.confirm({title: '确认收货', message: '您是否要确认收货？'}).then(() => {
        this.confirm_receipt_loading = true
        OrderAction.confirmReceipt(this.order.id).then(() => {
          Toast('确认收货成功')
          this.confirm_receipt_loading = false
          this.fetchOrder()
        }).catch(err => {
          Toast(err.msg)
          this.confirm_receipt_loading = false
        })
      })
    },
    fetchOrder () {
      OrderAction.show(this.$root.$mp.query.id)
        .then(data => {
          this.order = data
          this.customer_message = data.customer_message
          wx.hideNavigationBarLoading()
        })
        .catch(err => Toast(err.msg))
    }
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    this.order = null
    this.fetchOrder()
    wx.stopPullDownRefresh()
  },
  beforeMount () {
    wx.showNavigationBarLoading()
    this.order = null
    this.fetchOrder()
  }
}
</script>
<style lang="less" scoped>
.order {
  padding-bottom: 40rpx;
  background: #F8F8F8;
  .block-border {
   margin-bottom: 10px;
  }
}
 .btns {
    margin: 10px;
    button {
      margin: 3px 0;
    }
 }
 .cancel-btn {
   margin-top: 10px;
 }
</style>


